<template>
    <div>
        <el-row :gutter='20'>
            <el-col :span='8'>
                <el-card shadow='hover' class='mgb20' style='height:252px;'>
                    <div class='user-info'>
                        <img src='../../assets/img/img.png' class='user-avator' alt />
                        <div class='user-info-cont'>
                            <div class='user-info-name'>{{ name }}</div>
                            <div>{{ role }}</div>
                        </div>
                    </div>
                    <div class='user-info-list'>
                        当前时间：
                        <span>
                            {{ date }}
                        </span>
                    </div>
                    <div class='user-info-list'>
                        当前地点：
                        <span>浙江 杭州</span>
                    </div>
                </el-card>
                <el-card v-if='role==="学生"' shadow='hover' style='height:252px;'>
                    <template #header>
                        <div class='clearfix'>
                            <span>已修学分</span>
                        </div>
                    </template>
                    <div v-for='(item, index) in progressList' class='item-view' :data=progressList>
                        <el-progress :text-inside='true'
                                     :stroke-width='23'
                                     :percentage='setItemProgress(item)'
                                     :color='setItemStatus(item)' :format='setItemText(item)'
                                     :class='showProgressColor((item.completeNum/item.planNum)*100)'>
                        </el-progress>
                    </div>
                </el-card>
            </el-col>
            <el-col :span='16' v-if='role==="学生"'>
                <el-row :gutter='20' class='mgb20'>
                    <el-col :span='8'>
                        <el-card shadow='hover' :body-style="{ padding: '0px' }">
                            <div class='grid-content grid-con-3'>
                                <i class='el-icon-sort grid-con-icon'></i>
                                <div class='grid-cont-right'>
                                    <div class='grid-num'>{{ all_rank }}</div>
                                    <div>全校排名</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span='8'>
                        <el-card shadow='hover' :body-style="{ padding: '0px' }">
                            <div class='grid-content grid-con-2'>
                                <i class='el-icon-success grid-con-icon'></i>
                                <div class='grid-cont-right'>
                                    <div class='grid-num'>{{ major_rank }}</div>
                                    <div>专业排名</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span='8'>
                        <el-card shadow='hover' :body-style="{ padding: '0px' }">
                            <div class='grid-content grid-con-1'>
                                <i class='el-icon-error grid-con-icon'></i>
                                <div class='grid-cont-right'>
                                    <div class='grid-num'>{{ class_rank }}</div>
                                    <div>班级排名</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
                <el-row :gutter='20' class='mgb20' style='height:403px'>
                    <el-col :span='12'>
                        <el-card shadow='hover' :body-style="{ padding: '0px' }">
                            <template #header>
                                <div class='clearfix'>
                                    <span>最近成绩</span>
                                    <router-link to='/courseInfo'>
                                        <el-button style='float: right; padding: 3px 0' type='text'>查看更多</el-button>
                                    </router-link>
                                </div>
                            </template>
                            <recent-contest v-bind:id1='id'></recent-contest>
                        </el-card>
                    </el-col>
                    <el-col :span='12'>
                        <el-card shadow='hover' :body-style="{ padding: '0px' }">
                            <template #header>
                                <div class='clearfix'>
                                    <span>最近课程</span>
                                    <router-link to='/courseInfo'>
                                        <el-button style='float: right; padding: 3px 0' type='text'>查看更多</el-button>
                                    </router-link>
                                </div>
                            </template>
                            <recent-status v-bind:id1='id'></recent-status>
                        </el-card>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <el-row :gutter='20'>
            <el-col :span='12' v-if='role==="学生"'>
                <el-card shadow='hover'>
                    <gpa-chart v-bind:id1='id'></gpa-chart>
<!--                    <schart ref='line' class='schart' canvasId='line' :options='chart2'></schart>-->
                </el-card>
            </el-col>
            <el-col :span='12'>
                <el-card shadow='hover'>
                    <!--                    <codeview class="schart"></codeview>-->
                    <address-chart></address-chart>
<!--                    <schart ref='pie' class='schart' canvasId='pie' :options='chart1'></schart>-->
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>


<script>
import Schart from 'vue-schart';
import RecentContest from '@/components/common/RecentGrade';
import RecentStatus from '@/components/common/RecentCourse';
import AddressChart from '@/components/common/AddressChart';
import GpaChart from '@/components/common/GpaChart';
import Qs from 'qs';

export default {
    name: 'dashboard',
    props: ['id'],
    data() {
        return {
            name: this.$route.query.name,
            rank: [],
            todoList: [
                {
                    title: 'cf2500分题目一题',

                    status: false
                },
                {
                    title: '看队友的可持久化trie树代码',
                    status: false
                },
                {
                    title: '可持久化trie树学习',
                    status: false
                },
                {
                    title: '可持久化并查集例题（今日头条I题）',
                    status: false
                },
                {
                    title: '摸鱼',
                    status: true
                },
                {
                    title: '牛客赛补题',
                    status: true
                }
            ],
            chart1: {
                type: 'pie',
                title: {
                    text: '学生来源分布'
                },
                xRorate: 25,
                legend: {
                    position: 'left'
                },
                labels: ['河北', '山西', '吉林', '辽宁', '黑龙江', '江苏', '浙江', '安徽','福建', '江西', ],
                datasets: [
                    {
                        data: [15, 2, 3, 4, 5, 6, 7, 8]
                        // data: []
                    }
                ]
            },
            chart2: {
                type: 'line',
                title: {
                    text: '绩点变化'
                },
                labels: ['2019', '2020', '2021', '2022', '2023'],
                datasets: [
                    {
                        data: [4.362, 3.720, 4.380]
                    }
                ]
            },
            progressList: [
                {
                    name: '必修',
                    completeNum: 0,   // 计划数量
                    planNum: 30  // 完成数量
                },
                {
                    name: '选修',
                    completeNum: 3,
                    planNum: 20
                },
                {
                    name: '通识',
                    completeNum: 11,
                    planNum: 20
                },
                {
                    name: '预科',
                    completeNum: 15,
                    planNum: 15
                }
            ],
            date: new Date(),
            all_rank: 0,
            class_rank: 0,
            major_rank: 0,
            submitData: [],
            id: this.$route.query.id
        };
    },
    components: {
        Schart,
        RecentContest,
        RecentStatus,
        AddressChart,
        GpaChart
    },
    computed: {
        role() {
            return "学生";
        },
        user_name() {
            return this.$route.query.name
        }
    },

    methods: {
        changeDate() {
            const now = new Date().getTime();
            this.data.forEach((item, index) => {
                const date = new Date(now - (6 - index) * 86400000);
                item.name = `${date.getFullYear()}/${date.getMonth() +
                1}/${date.getDate()}`;
            });
        },
        // 设置进度
        setItemProgress(data) {
            if (data.completeNum > data.planNum) {
                return 100;
            } else {
                return parseInt((data.completeNum / data.planNum).toFixed(1) * 100);
            }
        },
        showProgressColor: function(val) {
            if (val < 25) {
                return 'el-bg-inner-running';
            } else if (val < 50) {
                return 'el-bg-inner-error';
            } else if (val < 75) {
                return 'el-bg-inner-done';
            }
        },

// 自定义进度条文字
        setItemText(row) {
            return () => {
                return row.name + '： ' + row.completeNum + '/' + row.planNum;
            };
        },

// 设置当前进度条状态，显示不同颜色
        setItemStatus(data) {
            if (data.completeNum > data.planNum) {
                return 'red';
            } else if (data.completeNum === data.planNum) {
                return '#59b401';
            } else {
                if (data.completeNum * 4 < data.planNum) {
                    return '#0153aa';
                } else if (data.completeNum * 2 < data.planNum) {
                    return '#0171aa';
                } else if (data.completeNum * 4 < data.planNum * 3) {
                    return '#00a7ad';
                } else {
                    return '#01b40a';
                }
            }
        },
        async getStatus() {
            let that = this
            this.timer = setInterval(function() {
                that.date = new Date().toLocaleString()
            })
            let role = this.role
            await this.$route.query.id
            this.id = this.$route.query.id
            let id = this.id
            await this.$axios.post("/rankInfo/filter", Qs.stringify({
                "id": id,
                "className": "",
                "semester": "",
                "type": role,
                "majorName": ""
            })).then(resp => {
                if(resp && resp.status === 200) {
                    let semester = Number(0)
                    for(let i = 0; i < resp.data.length; i++) {
                        // console.log(semester)
                        // console.log(Number(resp.data[i].semester))
                        if(semester <= Number(resp.data[i].semester)) {
                            that.all_rank = resp.data[i].place
                            that.major_rank = resp.data[i].majorPlace
                            that.class_rank = resp.data[i].classPlace
                            semester = resp.data[i].semester
                        }
                    }
                }
            })
            await this.$axios.post('/studentInfo/id', Qs.stringify({ "id": id })).then(resp => {
                if(resp && resp.status === 200) {
                    // console.log(resp.data)
                    that.progressList[0].completeNum = resp.data[0].credit
                }
            })
        }
    },
    mounted() {
        this.getStatus()
        // this.$axios.get("/statusNotIn/" + that.user_name + "/AC").then(resp => {
        //     if(resp && resp.status === 200) {
        //         that.unsolved_num = resp.data
        //     }
        // })
    },
    beforeDestroy: function() {
        if (this.timer) {
            clearInterval(this.timer);
        }
    }
};
</script>

<style scoped>
.el-row {
    margin-bottom: 20px;
}

.grid-content {
    display: flex;
    align-items: center;
    height: 100px;
}

.grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
}

.grid-num {
    font-size: 30px;
    font-weight: bold;
}

.grid-con-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
}

.grid-con-1 .grid-con-icon {
    background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
}

.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.user-avator {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}

.user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
}

.user-info-list span {
    margin-left: 70px;
}

.mgb20 {
    margin-bottom: 20px;
}

.todo-item {
    font-size: 14px;
}

.todo-item-del {
    text-decoration: line-through;
    color: #999;
}

.schart {
    width: 100%;
    height: 300px;
}


.content-view {
    height: calc(100vh - 84px);
    background-color: #FFFFFF;
    padding: 20px;
}

.item-view {
    margin-bottom: 1rem;
}

/* 渐变进度条 */
.el-bg-inner-running .el-progress-bar__inner {
    background-color: unset;
    background-image: linear-gradient(to right, #3587d8, #6855ff);
}

.el-bg-inner-error .el-progress-bar__inner {
    background-image: linear-gradient(to right, #3587d8, #fb3a7e);
}

.el-bg-inner-done .el-progress-bar__inner {
    background-image: linear-gradient(to right, #3587d8, #53ff54);
}

</style>
